<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
  <head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="renderer" content="webkit"/>

    <title>超人.FM|Superman.fm</title>

    <meta name="keywords" content="响应式后台"/>
    <meta name="description" content="响应式后台"/>

    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->

		<link href="/css/bootstrap.min.css?v=3.3.6" rel="stylesheet"/>
    <link href="/css/font-awesome.min.css?v=4.4.0" rel="stylesheet"/>
    <link href="/css/animate.css" rel="stylesheet"/>
    <link href="/css/style.css?v=4.1.0" rel="stylesheet"/>

      <style type="text/css">
          .closeBtn {
              text-align: center;
              color: #fff;
              border-radius: 50%;
              font-size: 24px;
          }
          .closeBtn:hover, .closeBtn:focus {
              color: #E0E0E0;
          }
      </style>
</head>

<body class="fixed-sidebar full-height-layout gray-bg" style="overflow:hidden">

    <!--mini聊天窗口开始-->
    <div class="small-chat-box fadeInRight animated">

        <div id="heading_id" class="heading" draggable="true" style="height: 5%;">
            <div class="dropdown pull-right">
                <a id="btnRight" title="关闭" class="dropdown-toggle closeBtn" data-toggle="dropdown" href="javascript:void(0);" onclick="parent.closeChatWindow();">
                    <i class="fa fa-times-circle"></i>
                </a>
            </div>
            Spartacus Chat Group
        </div>

        <div id="container_id">
            <div id="content_id" class="content">
                <div class="left">
                    <div class="author-name">
                        Spartacus <small class="chat-date">
                        10:02
                    </small>
                    </div>
                    <div class="chat-message active">
                        你好
                    </div>

                </div>
                <div class="right">
                    <div class="author-name">
                        游客
                        <small class="chat-date">
                            11:24
                        </small>
                    </div>
                    <div class="chat-message">
                        你好，请问您在找工作吗？
                    </div>
                </div>
                <div class="left">
                    <div class="author-name">
                        Spartacus
                        <small class="chat-date">
                            08:45
                        </small>
                    </div>
                    <div class="chat-message active">
                        是的
                    </div>
                </div>
                <div class="right">
                    <div class="author-name">
                        游客
                        <small class="chat-date">
                            11:24
                        </small>
                    </div>
                    <div class="chat-message">
                        那您想找什么样的工作呢？
                    </div>
                </div>
                <div class="right">
                    <div class="author-name">
                        游客
                        <small class="chat-date">
                            11:24
                        </small>
                    </div>
                    <div class="chat-message">
                        那您想找什么样的工作呢？
                    </div>
                </div>
                <div class="right">
                    <div class="author-name">
                        游客
                        <small class="chat-date">
                            11:24
                        </small>
                    </div>
                    <div class="chat-message">
                        那您想找什么样的工作呢？
                    </div>
                </div>
                <div class="right">
                    <div class="author-name">
                        游客
                        <small class="chat-date">
                            11:24
                        </small>
                    </div>
                    <div class="chat-message">
                        那您想找什么样的工作呢？
                    </div>
                </div>
                <div class="right">
                    <div class="author-name">
                        游客
                        <small class="chat-date">
                            11:24
                        </small>
                    </div>
                    <div class="chat-message">
                        那您想找什么样的工作呢？
                    </div>
                </div>
                <div class="right">
                    <div class="author-name">
                        游客
                        <small class="chat-date">
                            11:24
                        </small>
                    </div>
                    <div class="chat-message">
                        那您想找什么样的工作呢？
                    </div>
                </div>
                <div class="right">
                    <div class="author-name">
                        游客
                        <small class="chat-date">
                            11:24
                        </small>
                    </div>
                    <div class="chat-message">
                        那您想找什么样的工作呢？
                    </div>
                </div>
                <div class="right">
                    <div class="author-name">
                        游客
                        <small class="chat-date">
                            11:24
                        </small>
                    </div>
                    <div class="chat-message">
                        那您想找什么样的工作呢？
                    </div>
                </div>
                <div class="right">
                    <div class="author-name">
                        游客
                        <small class="chat-date">
                            11:24
                        </small>
                    </div>
                    <div class="chat-message">
                        那您想找什么样的工作呢？
                    </div>
                </div>
                <div class="right">
                    <div class="author-name">
                        游客
                        <small class="chat-date">
                            11:24
                        </small>
                    </div>
                    <div class="chat-message">
                        那您想找什么样的工作呢？
                    </div>
                </div>
                <div class="right">
                    <div class="author-name">
                        游客
                        <small class="chat-date">
                            11:24
                        </small>
                    </div>
                    <div class="chat-message">
                        那您想找什么样的工作呢？
                    </div>
                </div>
                <div class="right">
                    <div class="author-name">
                        游客
                        <small class="chat-date">
                            11:24
                        </small>
                    </div>
                    <div class="chat-message">
                        那您想找什么样的工作呢？
                    </div>
                </div>
                <div class="right">
                    <div class="author-name">
                        游客
                        <small class="chat-date">
                            11:24
                        </small>
                    </div>
                    <div class="chat-message">
                        那您想找什么样的工作呢？
                    </div>
                </div>
                <div class="right">
                    <div class="author-name">
                        游客
                        <small class="chat-date">
                            11:24
                        </small>
                    </div>
                    <div class="chat-message">
                        那您想找什么样的工作呢？
                    </div>
                </div>
                <div class="right">
                    <div class="author-name">
                        游客
                        <small class="chat-date">
                            11:24
                        </small>
                    </div>
                    <div class="chat-message">
                        那您想找什么样的工作呢？
                    </div>
                </div>
                <div class="left">
                    <div class="author-name">
                        Spartacus
                        <small class="chat-date">
                            08:45
                        </small>
                    </div>
                    <div class="chat-message active">
                        我暂时还没想好，再看看
                    </div>
                </div>
            </div>
        </div>

        <div id="send_id" class="form-chat" style="height: 5%;">
            <div class="input-group input-group-sm">
                <input type="text" class="form-control" /> <span class="input-group-btn"> <button
                    class="btn btn-primary" type="button">发送
            </button> </span>
            </div>
        </div>
    </div>
    <!--mini聊天窗口结束-->

    <!-- 全局js -->
    <script src="/js/jquery.min.js?v=2.1.4"></script>
<!--    <script src="/js/bootstrap.min.js?v=3.3.6"></script>-->
    <script src="/js/plugins/metisMenu/jquery.metisMenu.js"></script>
    <script src="/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
    <script src="/js/plugins/layer/layer.min.js"></script>

    <!-- 自定义js -->
    <script src="/js/hplus.js?v=4.1.0"></script>
    <script src="/js/contabs.js"></script>

    <script>
        var resizeContainer = function () {
            var headingDiv = document.getElementById('heading_id');
            var sendDiv = document.getElementById('send_id');

            var containerDiv = document.getElementById('container_id');
            containerDiv.style.height = (document.body.clientHeight-headingDiv.clientHeight-sendDiv.clientHeight-15) + "px";

            var contentDiv = $("#content_id");
            $(contentDiv).css("height", containerDiv.style.height);
        };

        $(document).ready(function () {
            resizeContainer();
        });

        window.onresize = function () {
            resizeContainer();
        };

    </script>
</body>

</html>
